<template>
  <view class="content">
      <view class="question-box" v-if="show===index" v-for="(item,index) in topicList" :key="index">     
      	<view class="question-header">
      		<view class="question-type" v-if="item.type===0">单选题</view>
          <view class="question-type" v-if="item.type===1">多选题</view>
          <view class="question-type" v-if="item.type===2">判断题</view>
      		<view class="question-order">{{index+1}}/{{topicList.length}}</view>
      	</view>
      	<u-line color="grey"></u-line>
      	<view class="question-body">
      		<view class="question-title">
      			{{item.title}}
      		</view>
          
          <!-- 答案滚动 :style="{height: wh + 'px'}"-->
          <scroll-view scroll-y >
              <view :class="['question-option-item',topicList[index].option[index2].checked? 'active':'']"
              	v-for="(item2,index2) in topicList[index].option" :key="index2" 
                v-if="(item2.value!='')&&item2.value!='null' ">
              	{{item2.optionKey}}&nbsp; {{item2.value}}
              </view>
          </scroll-view>      		
      	</view>
             <view class="question-analysis" style="color: red;">
               答案：{{item.answerArray}}
             </view>
             <view class="question-analysis-text">解析：{{item.analysis}}</view>
      </view>
     
      
      <view class="switchOrder">
      	<view class="pre" @click.native="preQuestion">上一题</view>
      	<view class="next" @click.native="nextQuestion">下一题</view>
        <!-- <view class="submit-answer" @click.native="submitAnswer">提交</view> -->
      </view>
      
      <!-- 做题统计 -->
         <view  class="tabbar">
           <u-tabbar
           	:value="value1"
           	@change="click1"
           	:fixed="true"
             activeColor="#d81e06"
           	:placeholder="false"
           	:safeAreaInsetBottom="false"
           >
           	<!-- <u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
           	<u-tabbar-item text="放映厅" icon="photo" @click="watchAllQuestion" ></u-tabbar-item> -->
           	<u-tabbar-item text="所有题目" icon="grid-fill" @click="watchAllQuestion" ></u-tabbar-item>
             
           	<!-- <u-tabbar-item text="收藏" icon="star-fill" @click="click1"></u-tabbar-item> -->
           </u-tabbar>
          
          </view>
                   <!-- 展示所有题目的气泡 -->
                   <view>
                   	<u-popup :show="showAll" mode="top" @close="close" @open="open">
                   		<view class="all-question">
                   			<view v-for="(item,index) in topicList" :key="index" 
                          @click.native="toSpecialQuestion(index)"
                   				:class="['all-question-item',item.correct?'active':'']">
                   				{{index+1}}
                   			</view>
                   		</view>
                   	</u-popup>
                   </view>
  </view>
</template>

<script>
  export default {
    onLoad(option) {
      const item = JSON.parse(decodeURIComponent(option.item));
      // console.log(item)
      this.topicList=item.topicList
      // console.log(option.id.submit)
      // const bean = JSON.parse(option.list)
      // console.log(bean)
    },
    data() {
      return {
        show:0,
        topicList:[],
        showAll:false,
      };
    },
    methods:{
      //观看特定的题目
      async toSpecialQuestion(index) {
      	// console.log("去固定的一题",index)
      	this.show = index
      	this.close()
      },
      // 题目切换，展示所有题目的关闭和展示
      click1(e) {
      	// console.log('click1', e);
      },
      open() {
      	// console.log('open');
      	// this.showAll=true
      },
      close() {
      	this.showAll = false
      	// console.log('close');
      },
      async preQuestion() {
      	if (this.show <= 0) {
      		console.log("已经是第一题了")
      	} else {
      		this.show--
      	}
      },
      async watchAllQuestion() {
      	// console.log("查看所有题目,当前是第",this.show)
      	this.showAll = true
      },
      async nextQuestion() {
      	// console.log(this.show)//0
      	// console.log(this.questionList.length-1)//3
      	if (this.show < this.topicList.length - 1) {
      		this.show++
      	} else {
      		console.log("已经是最后题了")
      	}
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content{
    // margin-bottom: 60rpx;
     padding-bottom: 25%;
  }
  .question-analysis-text{
    margin: 20rpx auto;
    min-height: 100rpx;
    padding: 10rpx;
    box-shadow: 0px 0px 5px 0px lightgrey;
  }
  .all-question {
  	display: flex;
  	flex-wrap: wrap;
  	padding: 20rpx;
  
  	.all-question-item {
  		background-color: red;
  		height: 80rpx;
  		width: 80rpx;
  		border: 1px solid grey;
  		border-radius: 40rpx;
  		text-align: center;
  		line-height: 80rpx;
  		margin: 30rpx 30rpx;
      color: white;
  
  		&.active {
  			background-color: #3c9cff;
  			color: white;
  		}
  	}
  }
  .switchOrder {
  	display: flex;
  	justify-content: center;
  
  	.pre {
  		width: 25%;
  		height: 80rpx;
  		background-color: #3c9cff;
  		text-align: center;
  		line-height: 80rpx;
  		color: white;
  		margin: 30rpx 40rpx;
  		border-radius: 10rpx;
  	}
    
    .submit-answer{
      width: 25%;
      height: 80rpx;
      background-color: #53c21d;
      text-align: center;
      line-height: 80rpx;
      color: white;
      margin: 30rpx 40rpx;
      border-radius: 10rpx;
    }
  
  	.next {
  		width: 25%;
  		height: 80rpx;
  		background-color: #3c9cff;
  		text-align: center;
  		line-height: 80rpx;
  		color: white;
  		margin: 30rpx 40rpx;
  		border-radius: 10rpx;
  
  	}
  }
.question-box {
    	// background-color: lightgray;
    	// text-align: center;
    	width: 90%;
    	margin: 10rpx auto;
    
    	.question-title {
    		min-height: 180rpx;
    		// border: 1px solid lightgray;
    		width: 100%;
    		margin: 20rpx auto;
    		// padding: 20rpx;
    		letter-spacing: 3px;
    		color: grey;
    		text-indent: 2rem;
    	}
    
    	.question-option-item {
    		margin: 30rpx auto;
    		min-height: 100rpx;
    		border: 1px solid lightgray;
    		line-height: 100rpx;
    		padding-left: 20rpx;
    		color: grey;
    
    		&.active {
    			background-color: #3c9cff;
    			color: white;
    		}
    
    	}
    
    	.question-header {
    		height: 80rpx;
    		padding: 20rpx;
    
    		.question-order {
    			float: right;
    		}
    
    		.question-type {
    			float: left;
    			background-color: lightseagreen;
    			color: white;
    			height: 50rpx;
    			width: 20%;
    			font-size: 30rpx;
    			line-height: 50rpx;
    			text-align: center;
    			// margin-top: 20rpx;
    		}
    	}
    }
</style>
